<template>
  <!-- 我们的荣誉 -->
  <div class="honor">
    <div class="honor_lunbo">
      <swiper ref="swiper" :options="swiperOption4">
        <swiper-slide class="swiper-slide" v-for="(item,index) in honor_year" :key="index">
          <div class="honor_item" @click="onSlide(index)">
            <img
              v-if="index!=honor_year.length-1"
              class="honor_item_img"
              src="@/assets/images/time_hui_ban.png"
              alt
            />
            <img v-else class="honor_item_img" src="@/assets/images/time_hui_quan.png" alt />
            <div v-if="time_slide==index" class="round"></div>
            <p>{{item}}</p>
          </div>
        </swiper-slide>
      </swiper>
      <!-- 箭头左 -->
      <div id="swiper-button-prev4" class="swiper-button-prev prev" slot="button-prev"></div>
      <!-- 箭头右 -->
      <div id="swiper-button-next4" class="swiper-button-next next" slot="button-next"></div>
    </div>
    <div class="honor_list">
      <!--    -->
      <router-link
        class="honor_item"
        v-for="(item,index) in honor_list"
        :key="index"
        v-flex_for="{count:honor_list.length,number:number,key:index}"
        :to="{name:'zh_honor_details',query:{id:item.id}}"
      >
        <div class="imgs">
          <img class="honor_item_bg" src="@/assets/images/honor_item_bg.png" alt />
          <el-image class="honor_item_img" fit="cover" :src="item.image" lazy></el-image>
        </div>
        <p>{{item.title}}</p>
      </router-link>
    </div>
    <el-pagination
      :page-size="12"
      :total="count"
      background
      layout="prev, pager, next"
      @current-change="pageSize"
      :current-page.sync="currentPage"
    ></el-pagination>
  </div>
</template>
<script>
import { honor_list, honor_visit } from "@/api/about.js";
export default {
    name:"honor",
  data() {
    return {
      number: 4, //列表每行个数
      honor_list: [],
      honor_year: [],
      currentPage: 1, //当前页数
      count: 0,
      time_slide: 0,
      swiperOption4: {
        slidesPerView: 'auto',
        spaceBetween: 0,
        // 鼠标控制滚动
        // mousewheel: {
        //   releaseOnEdges: true
        // },
        //设置点击箭头
        navigation: {
          nextEl: "#swiper-button-next4",
          prevEl: "#swiper-button-prev4",
        },
        bserver: true, //修改swiper自己或子元素时，自动初始化swiper
        observeParents: true, //修改swiper的父元素时，自动初始化swiper
        //鼠标变成抓手型
        grabCursor: false,
        //开启鼠标滚轮控制Swiper切换
        // mousewheel: true,
      },
    };
  },
  created() {
    // if (this.$store.state.headTitle.equipment == "mobile") {
    //   this.swiperOption4.slidesPerView = 6;
    //   this.number = 2;
    // } else {
    //   if (this.$store.state.headTitle.clientW < 1200) {
    //     this.number = parseInt(this.$store.state.headTitle.clientW / 300);
    //   }
    // }
  },
  mounted() {
    this.getHonor_list(1);
  },
  watch: {
    // "$store.state.headTitle.equipment": {
    //   deep: true,
    //   handler: function (newValue, oldValue) {
    //     if (newValue == "pc") {
    //       this.$refs.swiper.swiper.params.slidesPerView = 9;
    //       this.number = 4;
    //     } else {
    //       this.$refs.swiper.swiper.params.slidesPerView = 6;
    //       this.number = 2;
    //     }
    //     // this.$refs.swiper.update();
    //   },
    // },
    "$store.state.headTitle.clientW": {
      deep: true,
      handler: function (newValue, oldValue) {
        // 设置一个定时器 避免多次触发
        clearTimeout(this.Timeout);
        this.Timeout = setTimeout(() => {
          if (newValue >= 1200) {
            this.number = 4;
          } else {
            this.number = parseInt(newValue / 300);
          }
        }, 200);
      },
    },
  },
  methods: {
    pageSize(val) {
      this.currentPage = val;
      this.getHonor_list(val, 12, this.honor_year_slide);
    },
    onSlide(index) {
      this.time_slide_change = this.time_slide; //备份一个索引 如果后续没有结果则重置当前选中的时间段
      this.time_slide = index;
      this.currentPage = 1; //当前页数
      this.honor_year_slide = this.honor_year[index]; //当前年份
      this.getHonor_list(1, 12, this.honor_year_slide);
    },
    //协力荣誉列表
    getHonor_list(page, limit = 12, year) {
      honor_list({ page, limit, year }).then((res) => {
        this.honor_year = res.data.year;
          this.count = res.data.count;
          
        if (res.data.data.length < 1) {
          this.time_slide = this.time_slide_change;
          return this.$message({
            message: "暂时没有数据",
            type: "warning",
          });
        }
        this.honor_list = res.data.data;
        
        
      
      });
    },
  },
};
</script>
<style scoped src="./sass/aboutUs.css"></style>
